<!--
@description ：输入框模版
-->

<template>
  <div>
    <el-row :gutter="24">
      <el-col v-for="(item, index) in formList" :key="index" :span="+item.colSpan">
        <span v-if="item.type == 'info'">{{ item.label }}{{ item.value }}</span>
        <span v-if="item.type == 'showSwitch'" style="color:rgb(8, 117, 255);">
          {{ item.label }}:
          <el-switch
          v-model="item.value"
          active-color="#13ce66"
          inactive-color="#ccc"
        >
        </el-switch></span>
        <el-form-item :label="item.label" v-if="noItemArr.indexOf(item.type) == -1" :prop="item.prop"
        >
          <el-input v-if="item.type == 'input'" v-model="form[item.prop]" placeholder="请输入" style="width: 70%"
          ></el-input>
          <el-select v-if="item.type == 'select'" v-model="form[item.prop]" placeholder="请选择" style="width: 70%">
            <el-option v-for="s in enumOpt[item.option]" :key="s.dictValue" :label="s.dictLabel" :value="s.dictValue"
            ></el-option>
          </el-select>
          <el-radio-group v-if="item.type == 'radio'" v-model="form[item.prop]">
            <el-radio v-for="s in enumOpt[item.option]" :key="s.dictValue" :label="s.dictValue">{{
                s.dictLabel
              }}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-if="item.type == 'checkbox'" v-model="form[item.prop]">
            <el-checkbox v-for="s in enumOpt[item.option]" :key="s.dictValue" :label="s.dictValue">{{
                s.dictLabel
              }}
            </el-checkbox>
          </el-checkbox-group>
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="form[item.prop]"
            placeholder="选择日期"
            style="width: 70%"
            type="date"
          >
          </el-date-picker>
          <el-input v-if="item.type == 'textarea'" v-model="form[item.prop]" :rows="3" style="width: 90%"
                    type="textarea"
          ></el-input>
          <el-input v-if="item.type == 'specialTextarea'" v-model="form[item.prop]" :rows="3" placeholder="请输入"
                    style="width: 90%" type="textarea"
          ></el-input>
          <el-checkbox-group v-if="item.type == 'specialTextarea'" v-model="item.tagValue" style="margin-top: 12px"
                             @change="specialChange(item.tagValue, form[item.prop], enumOpt[item.option], item.prop)"
          >
            <el-checkbox-button v-for="s in enumOpt[item.option]" :key="s.dictValue" :label="s.dictLabel"
                                class="specialTextareaTag"
            >{{ s.dictLabel }}
            </el-checkbox-button>
          </el-checkbox-group>
          <div v-if="item.type == 'upload'" style="width: 500px; text-align: left;margin-top: 6px">
            <el-upload
              :before-remove="beforeRemove"
              :file-list="form[item.prop]"
              :limit="3"
              :on-exceed="handleExceed"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              action="#"
              multiple
              style="margin-left: -100px"
            >
              <br>
              <i class="el-icon-plus"
                 style="font-size: 24px; border: 1px solid #ccc; padding: 12px;border-radius: 4px;margin-left: -152px;"
              ></i>
            </el-upload>
            <div slot="tip" class="el-upload__tip">支持添加pdf\jpg\png\doc.\docx.\mp3.格式的能够证明服务真实性的内容
              <br>单个文件不超过5M，最多可上传5个文件
            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  name: 'formTemplate', //输入框模版
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formList: {
      type: Array,
      default: () => {
        return []
      }
    },
    enumOpt: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {},
  data() {
    return {
      noItemArr: ['info', 'showSwitch']
    }
  },
  watch: {},
  methods: {
    specialChange(selectedValues, inputValue, arr, prop) {
      console.log('selectedValues::::;', selectedValues)
    },

    handlePreview() {

    },
    handleRemove() {

    },
    beforeRemove() {

    },
    handleExceed() {

    }
  },
  mounted() {

  },
  created() {
  }
}

</script>

<style lang="scss" scoped>

::v-deep {
  .el-checkbox-button__inner {
    margin: 0 12px 12px 6px;
    border-radius: 20px !important;
    background: rgba(88, 202, 134, 0.1);
    border: rgba(88, 202, 134, 0.2) !important;
  }

  .el-checkbox-button {
    background: #fff !important;

    &:hover {
      background: #fff !important;
    }
  }

  .el-checkbox-button.is-checked {
    border: 0 !important;
  }
}
</style>
